<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <a-button type="primary" icon="plus" @click="add">{{
                            $ti18('rxList.newBtn', '新增')
                        }}</a-button>
                        <a-button
                            type="primary"
                            v-if="selectedRowKeys.length > 0"
                            icon="redo"
                            @click="changeApp('', selectedRows, 'colId', 'name', 'appId', '', changeAppId)"
                        >
                            {{ i18n('list.changeApp', '变更应用') }}
                        </a-button>
                        <a-dropdown
                            v-if="
                                removeEnable && selectedRowKeys.length > 0 && editEnable && selectedRowKeys.length > 0
                            "
                        >
                            <a-button style="margin-left: 8px">
                                {{ $ti18('rxList.moreBtn', '更多') }}
                                <a-icon type="down" />
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item
                                    key="1"
                                    @click="editOne"
                                    v-if="editEnable && selectedRowKeys.length > 0"
                                    alias="formRuleEdit"
                                    :butn-type="'primary'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="edit" />
                                    {{ $ti18('rxList.editBtn', '编辑') }}
                                </a-menu-item>
                                <a-menu-item
                                    key="2"
                                    @click="delByIds(selectedRowKeys)"
                                    v-if="removeEnable && selectedRowKeys.length > 0"
                                    alias="formRuleDelete"
                                    :butn-type="'danger'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="delete" />
                                    {{ $ti18('rxList.delBtn', '删除') }}
                                </a-menu-item>
                                <a-menu-item
                                    key="3"
                                    @click="changeExport(exportConf)"
                                    v-if="selectedRowKeys.length > 0"
                                    alias="formRuleDelete"
                                    :butn-type="'primary'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="switcher" />
                                    {{ $ti18('rxList.changeExport', '切换导出') }}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow"
                            ><i class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span
                        >
                    </span>
                </div>
                <div
                    btnalign="right"
                    slot="searchbar"
                    v-if="fitSearch"
                    @search="search"
                    @cancel="cancel"
                    @close="closeSearchbar"
                >
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.name', '栏目名')">
                                    <a-input
                                        :placeholder="i18n('form.name', '栏目名', 'input')"
                                        v-model="queryParam['Q_a.NAME__S_LK']"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.key', '栏目别名')">
                                    <a-input
                                        :placeholder="i18n('form.key', '栏目别名', 'input')"
                                        v-model="queryParam['Q_a.KEY__S_LK']"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.type', '类型')">
                                    <a-select
                                        id="tempType"
                                        :placeholder="i18n('form.type', '请选择类型', 'select')"
                                        v-model="queryParam['Q_a.TYPE__S_LK']"
                                        @change="defChangeType"
                                    >
                                        <a-select-option v-for="item in tempTypeList" :key="item.id" :value="item.id"
                                            >{{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan" v-if="!curApp.appId">
                                <a-form-item :label="$ti18('rxForm.appId', '应用')">
                                    <rx-search-app @change="appChange" v-model="searchApps"> </rx-search-app>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-portal/portal/core/insColumnDef/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="colId"
                    @selectChange="onSelectChange"
                >
                    <span slot="exportApp">
                        {{ exportI18n('export.isExport', '导出') }}
                        <export-app />
                    </span>
                    <span slot="name" slot-scope="{ text, record }">
                        <span>{{ getName(text) }}</span>
                    </span>
                    <span slot="isMobile" slot-scope="{ text, record }">
                        <a-tag :color="statusMap[text].color">
                            <span>{{ statusMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="appId" slot-scope="{ text, record }">
                        {{ allApps[text] ? $i18(allApps[text].appName, '应用名称') : $ti18('rxList.noAppName', '无') }}
                    </span>
                    <span slot="isExport" slot-scope="{ text, record }">
                        <a-tag :color="text == 1 ? 'green' : 'red'">
                            <span>{{
                                text == 1 ? exportI18n('export.yes', '是') : exportI18n('export.no', '否')
                            }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="canEdit(record)" @click.stop="edit(record)">{{
                            $ti18('rxList.editBtn', '编辑')
                        }}</span>
                        <span v-if="canEdit(record)" @click.stop="delByIds([record.colId])">{{
                            $ti18('rxList.delBtn', '删除')
                        }}</span>
                        <span @click="setExport(record, exportConf)">{{
                            record.isExport == 1
                                ? exportI18n('export.noExport', '不导出')
                                : exportI18n('export.exported', '导出')
                        }}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import InsColumnDefApi from '@/api/portal/core/insColumnDef'
import InsColumnTempApi from '@/api/portal/core//insColumnTemp'
import InsColumnDefEdit from './InsColumnDefEdit'
import { BaseList, RxLayout } from '@lowcode/jpaas-common-lib'
import userState from '@/assets/js/userState'
import { mapState } from 'vuex'
import exportApp from '@/views/modules/share/exportApp'
import AppSearch from '@/views/modules/share/AppSearch'
import RxSearchApp from '@/views/modules/share/rx-search-app'
import changeAppJs from '@/views/modules/share/changeApp'
import FormPcApi from '@/api/form/core/formPc'
import switchExport from '@/utils/switchExport'

export default {
    name: 'InsColumnDefList',
    mixins: [BaseList, userState, AppSearch, changeAppJs, switchExport],
    components: {
        InsColumnTempApi,
        RxLayout,
        exportApp,
        RxSearchApp,
    },
    computed: {
        ...mapState({
            // 所属应用
            allApps: (state) => (state.appSetting ? state.appSetting.allApps : {}),
        }),
    },
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    type: 'indexColumn',
                    scopedSlots: { customRender: 'serial' },
                    width: 40,
                },
                {
                    title: this.i18n('form.name', '栏目名'),
                    dataIndex: 'name',
                    width: 180,
                    scopedSlots: { customRender: 'name' },
                },
                { title: this.i18n('form.key', '栏目别名'), dataIndex: 'key', width: 120 },
                { title: this.i18n('form.type', '类型'), dataIndex: 'typeName', width: 100 },
                {
                    title: this.i18n('form.appId', '所属应用'),
                    dataIndex: 'appId',
                    width: 140,
                    sortField: 'APP_ID_',
                    scopedSlots: { customRender: 'appId' },
                },
                {
                    dataIndex: 'isExport',
                    slots: { title: 'exportApp' },
                    width: 60,
                    scopedSlots: { customRender: 'isExport' },
                },
                {
                    title: this.$ti18('rxForm.createTime', '创建时间'),
                    dataIndex: 'createTime',
                    sorter: true,
                    sortField: 'CREATE_TIME_',
                    width: 120,
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    dataIndex: 'action',
                    width: 120,
                    scopedSlots: { customRender: 'action' },
                },
            ],
            component: InsColumnDefEdit,
            comment: this.i18n('list.comment', '栏目定义'),
            tempTypeList: [],
            statusMap: {
                1: { color: 'green', text: this.i18n('list.yes', '是') },
                0: { color: 'red', text: this.i18n('list.no', '否') },
            },
            /**
             * 导出配置
             */
            exportConf: {
                Api: InsColumnDefApi,
                id: 'pkId',
            },
        }
    },
    mounted() {
        this.getTemList()
    },
    created() {
        // this.needFilterAppId();
        this.columns = this.removeAppColumn(this.curApp.appId, this.columns)
    },
    methods: {
        getName(text) {
            if (text.includes('{') && text.includes('}')) {
                let fn = new Function(`return ${text}`)()
                let lang = window.localStorage.getItem('language') || 'zh-CN'
                return fn[lang] || fn['zh-CN'] || text
            }
            return text
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'insColumnDef', key)
        },
        exportI18n(name, text, key) {
            return this.$ti18(name, text, 'appExport', key)
        },
        delById(ids) {
            return InsColumnDefApi.del({ ids: ids.join(',') })
        },
        getListByParams(parameter) {
            return InsColumnDefApi.query(parameter)
        },
        getTemList() {
            var _this = this
            var parameter = {
                pageNum: '',
                pageSize: '',
                params: {},
            }
            InsColumnTempApi.query(parameter).then((result) => {
                _this.tempTypeList = result.data
            })
        },
        getTempObj(tempId) {
            for (var i = 0; i < this.tempTypeList.length; i++) {
                var tempObj = this.tempTypeList[i]
                if (tempId == tempObj.id) {
                    return tempObj
                }
            }
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false
        },
        changeAppId(selectedRows) {
            InsColumnDefApi.saveList(selectedRows)
        },
    },
}
</script>
<style scoped></style>
